<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="hjb2722404, hjb2722404@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <title>canvas动画之百分比加载</title>
</head>
<body>
    <!--创建画布-->
    <canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>

    <!--利用js脚本来绘制动画-->
    <script>
        //在页面加载时执行动百分比加载画函数
        window.onload = function(){

            var canvas = document.getElementById("canvas"), //获取canvas元素
                    context = canvas.getContext("2d"),//获取画图的上下文环境,指名为2d
                    centerX = canvas.width / 2, //canvas中心点x坐标
                    centerY = canvas.height / 2, //canvas中心点y坐标
                    rad = Math.PI * 2 / 100,//将360度平分成100份,因为是按百分比来绘制
                    speed = 0.1;  //用来控制动画速度

            //绘制蓝色外圈
            function blueCircle(n){
                context.save(); //保存当前绘画环境的上下文
                context.strokeStyle = "#fff"; //设置圆圈的颜色,也可以可以设为变量
                context.lineWidth = 5; // 设置圆圈的线条宽度,可以设置为变量
                context.beginPath(); // 路径开始
                context.arc(centerX, centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false); //使用context.arc(圆心x坐标, 圆心y坐标, 半径, 起始角度, 终止角度, 是否逆时针)函数绘制圆圈
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }

            //绘制白色外圈
            function whiteCircle(){
                context.save();
                context.beginPath();
                context.strokeStyle = "red";
                context.lineWidth = 5;
                context.arc(centerX, centerY, 100, 0, Math.PI *2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }


            //百分比文字绘制
            function text(n){
                context.save();
                context.strokeStyle = "#49f";
                context.font = "40px Arial";
                context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
                context.stroke();
                context.restore();
            }

            //动画循环
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                whiteCircle();
                text(speed);
                blueCircle(speed);

                if(speed > 100) speed = 0;
                speed += 0.1;
            }());
        }

    </script>

</body>
</html>